import { TextInput, TouchableOpacity, Alert } from "react-native";
import React, { useState } from "react";
import { Ionicons } from "@expo/vector-icons";
import { useColor } from "@/hooks/color";
import { useLoadedFontFamilyByAction } from "@/hooks/font";
import { useTranslation } from "react-i18next";
import { Card } from "react-native-ui-lib";

interface ISearchBarProps {}

const SearchBar: React.FC<ISearchBarProps> = () => {
  const [search, setSearch] = useState<string>("");
  const onSubmitEditingByAction = () => {
    Alert.alert("搜索内容", search);
    setSearch("");
  };

  return (
    <Card
      elevation={10}
      className='flex flex-row w-full rounded-2xl items-center px-2 gap-1 py-2'
      style={{ backgroundColor: useColor().color.searchBackGourd }}>
      <Ionicons name='search' size={18} color={useColor().color.search} />
      <TextInput
        placeholder={useTranslation().t("3004")}
        placeholderTextColor={useColor().color.search}
        value={search}
        onChangeText={text => setSearch(text)}
        maxLength={10}
        onSubmitEditing={onSubmitEditingByAction}
        style={{ color: useColor().color.search, fontSize: 16, ...useLoadedFontFamilyByAction("SPACE_MONO") }}
        className='flex grow'
      />
      <TouchableOpacity onPress={() => setSearch("")} style={{ display: search.length > 0 ? "flex" : "none" }}>
        <Ionicons name='close' size={18} color={useColor().color.search} />
      </TouchableOpacity>
    </Card>
  );
};

export default SearchBar;
